import { inject, observer } from 'mobx-react';
import EHeader from '../../common/EHeader';
import { WeaTab, WeaTable, WeaLocaleProvider} from 'ecCom';
import Tabs, { TabPane } from 'rc-tabs';
import TabContent from 'rc-tabs/lib/TabContent';
import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';
import 'rc-tabs/assets/index.css';
import { renderColumn, reformData } from '../../../../util/centerUtil';
const getLabel = WeaLocaleProvider.getLabel;
import { toJS } from 'mobx';
import { Spin } from 'antd';
import CenterLoglist from '../CenterLoglist';
@inject('wfCenterStore')
@observer
class Main extends React.Component{

  constructor() {
    super();
    this.state = {
      currentTab: '',
      type: 'doing',
      tabs: []
    }
  }
  addHoverEvent = () => {
    let that = this;
    this.timerID=setTimeout(()=>{ 
      clearTimeout(that.timerID);
      $("#todolist-div tr").on("mouseover mouseout",function(event){
        if(event.type == 'mouseover') {
          $(this).find('.workflow_center_signaturesIcon').css({'display': 'inline-block', top: 0, marginLeft: '2px'})
        } else if( event.type == 'mouseout') {
          $(this).find('.workflow_center_signaturesIcon').css('display', 'none')
        }
      })
    },3000)
  }
  componentDidMount() {
    const { getCenterWf } = this.props.wfCenterStore;
    getCenterWf({}, this.changeState);
    window.backlogRefresh = this.doRefresh;
    window.openCenter = this.openCenter;
  }
  componentWillReceiveProps(nextProps) {
    const { getCenterWf } = this.props.wfCenterStore;
    if(this.props.location.key !== nextProps.location.key) {
      getCenterWf({}, this.changeState);
    }
  }
  componentDidUpdate() {
    const { loadingStatusObj: { todolistHasLoad } } = this.props.wfCenterStore;
    todolistHasLoad && this.addHoverEvent();
  }
  componentWillUnmout() {
    clearTimeout(this.timer);
  }
  shouldComponentUpdate(nextProps,nextState) {
      return true;
  }
  changeState = (obj={}) => {
    let tabs = reformData(obj).tabs;
    this.setState({
      currentTab: tabs[0].index,
      tabs
    });
  }
  tabChange = v => {
    const { getTabSwitch, changeLoadStatus } = this.props.wfCenterStore;
    this.setState({
      currentTab: v.index
    })
    changeLoadStatus({todolistHasLoad: false});
    getTabSwitch('backlog', {typeid: v.typeid});
  }
  moreBtnClick = () => {
    const { currentTab, tabs } = this.state;
    let typeid = 0;
    tabs.map(v => {if(v.index == currentTab) typeid = v.typeid});
    let url = `/spa/workflow/index_mobx.jsp#/main/workflow/listDoing?jumpTab=${typeid}&source=wfcenter_todo`;
    window.open(url, '_blank');
  }
  doSave = (data={}) => {
    const { getSetSave,changeLoadStatus,getCenterWf } = this.props.wfCenterStore;
    getSetSave({eleType: 'doing', ...data});
    changeLoadStatus({todolistHasLoad: false});
    this.timer = setTimeout(() => {getCenterWf({}, this.changeState)},500);
  }
  doRefresh = () => {
    const { getTabSwitch, changeLoadStatus, getTabCount } = this.props.wfCenterStore;
    const { tabs,currentTab } = this.state;
    let typeid = 0;
    changeLoadStatus({todolistHasLoad: false});
    tabs.map(v => {if(v.index == currentTab) typeid = v.typeid});
    getTabSwitch('backlog', {typeid: typeid});
    getTabCount(tabs, (data) => {this.setState({tab: data})});
  }
  onSettingBtnClick = (callback) => {
    const { getSettingDialogInfo } = this.props.wfCenterStore;
    getSettingDialogInfo({eleType: 'doing'});
  }

  getIcon = (info) => {
    let com = null;
    switch(info.tabname){
      case('flowDoing'): {
        com = <i className="icon-coms02-Pending-disposal" style={{color: '#37B1FF'}}/>
      }; break;
      case('flowAll'): {
        com = <i className="icon-coms02-all" style={{color: '#37B1FF'}}/>
      }; break;
      case('flowView'):{
        com = <i className="icon-coms02-To-be-read" style={{color: '#7DC756'}}/>
      }; break;
      case('flowReject'): {
        com = <i className="icon-coms02-Be-returned" style={{color: '#F39110'}}/>
      }; break;
      case('flowSup'): {
        com = <i className="icon-coms02-Supervise" style={{color: '#B780FB'}}/>
      }; break;
      case('flowNew'): {
        com = <i className="icon-coms02-Unread" style={{color: '#FA6C64'}}/>
      }; break;
      case('flowRes'): {
        com = <i className="icon-coms02-feedback" style={{color: '#7DC756'}}/>
      }; break;
      case('flowOver'): {
        com = <i className="icon-coms02-overtime" style={{color: '#FA6C64'}}/>
      }; break;
      case('flowZF'): {
        com = <i className="icon-coms02-Forward" style={{color: '#B780FB'}}/>
      }; break;
      case('flowCS'): {
        com = <i className="icon-coms02-make-a-copy-for" style={{color: '#F39110'}}/>
      }; break;
      case('flowAttention'): {
        com = <i className="icon-coms02-My-concern" style={{color: '#37B1FF'}}/>
      }; break;
      case('flowCY'): {
        com = <i className="icon-coms02-Circulate" style={{color: '#F39110'}}/>
      }; break;
      default: {
        com = <i className="icon-portal-content-o" style={{color: '#7DC756'}}/>
      }
    }
    return com;
  }
  openCenter = (value, useid, usetype) => { //useid,usetype传递主次账号的参数
    if(useid == -1) useid = '';
    if(usetype == -1) usetype = '';
    this.refs.wfCenterLogList && this.refs.wfCenterLogList.signviewPoistion(value, useid, usetype);
  }
  render() {
    const {  todoData={}, settingDataMap, loadingStatusObj: { todolistHasLoad }} = this.props.wfCenterStore;
    const { columnsTitle, dataSource } = reformData(toJS(todoData));
    const { currentTab, type, tabs } = this.state;
    let columns = renderColumn(toJS(dataSource[0]), columnsTitle,'backlog', this.openCenter);
    let settingData = [];
    if(settingDataMap.has(type)) {
      settingData = settingDataMap.get(type);
    }
    return(
      <div className='wf-center-ele-item backlog-div'>
        <div className='backlog-element-div'>
          <EHeader ecId={`${this && this.props && this.props.ecId || ''}_EHeader@fd9oci`} 
            title={getLabel(516840,'待办中心')} 
            type={type}
            settingData={settingData}
            dialogHeight={'302'}
            toolSetting={{more: true,refresh: true, setting: true}}
            moreBtnClick={this.moreBtnClick}
            doRefresh={this.doRefresh}
            doSave={this.doSave}
            onSettingBtnClick={this.onSettingBtnClick}
          />
          <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@5xbtrf`} activeKey={currentTab}
              renderTabBar={()=><ScrollableInkTabBar ecId={`${this && this.props && this.props.ecId || ''}_ScrollableInkTabBar@ww2aet`} />}
              renderTabContent={()=><TabContent ecId={`${this && this.props && this.props.ecId || ''}_TabContent@03xswp`} />}
              className="tabcontainer tab2">
                { 
                  tabs.length > 0 && tabs.map((v,i) => {
                    const className = v.index == currentTab ? `tab2selected tabitem` : `tab2unselected tabitem`;
                    return (
                      <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@jei04w@${v.index}`} 
                        key={i+1} 
                        style={{width: '200px'}} 
                        tab={
                          <div title={v.title}
                               className={className} 
                               onClick={() => this.tabChange(v)}>
                            <div className='wrap'>
                              <div className='left-img'>
                                {this.getIcon(v)}
                                {/* <img src={v.imgSrc}/> */}
                              </div>
                              <div className='right-info'>
                                <p>{v.title}</p>
                                <p>{v.count}</p>
                              </div>
                            </div>
                          </div>
                        }>
                      </TabPane> 
                    )
                  }) 
                }
          </Tabs>  
          <div className='backlog-ele-content'>
            <div className="backlog-table" id='todolist-div' style={{height: '100%'}}>
              <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@6iusjw`} spinning={!todolistHasLoad}>
                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@pk47yx`} 
                  columns={columns} 
                  showHeader={true}
                  pagination={false} 
                  dataSource={dataSource} 
                  scroll={{ y: 285 }}
                />
              </Spin>
            </div>
          </div>
          <CenterLoglist ecId={`${this && this.props && this.props.ecId || ''}_CenterLoglist@u2mzr7`}  ref="wfCenterLogList"/>

        </div>
      </div>
    ) 
  }
}

export default Main